<template>
  <div class="slot-container">
    <div class="slot-wrapper">
      <h1>父组件:---{{ val }}</h1>
    </div>
    <A @onClick="onClick">
      <template #header>
        <h1>Here might be a page title</h1>
      </template>
      <template #default="slotProps">
        <h1>我是main: ----> 插槽作用域内容：{{ slotProps.msg.msg }}: {{ slotProps.msg.title }}</h1>
      </template>
      <template #footer>
        <h1>我是footer</h1>
      </template>
    </A>
  </div>
</template>
<script lang="ts">
/**
 * 插槽：
 * 1. 匿名插槽
 * 2. 具名插槽
 * 3. 作用域插槽（子父传参） :有时让插槽内容能够访问子组件中才有的数据是很有用的
 *  就是让子组件的数据，传递给父组件的模版。直接在模版中调用渲染
 * // 正常的子父传参
 * setup(props, context) {
 *  context.emit('', '')
 * }
 */
import { defineComponent, ref } from 'vue'
import A from './components/A.vue'
export default defineComponent({
  components: { A },
  setup() {
    const val = ref<string>('')

    const onClick = (msg: string) => {
      console.log('msg:', msg)
      val.value = msg
    }
    return { onClick, val }
  },
})
</script>
<style>
.slot-wrapper {
  height: 200px;
  border: 1px solid #000;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
}
</style>
